import Header from "@shared/header";
import styles from "@styles/consult.module.scss";
import classNames from "classnames";

export default function Consult() {
  return (
    <>
      <Header title="问诊详情" />
      <div className={styles.page}>
        <div className={styles.bg}>
          <div className={styles.top}>
            <div className={styles.type}>
              <span>图文问诊</span>
              <span>39元</span>
            </div>
            <div className={classNames(styles.status, styles.notPay)}>
              已取消
            </div>
          </div>
          <div className={styles.tip}>
            取消/退款进度：您的订单已取消，诊金将在1-7个工作日内退回原支付账户。
          </div>
        </div>
        <section className={styles.doctor}>
          <h4 className={styles.title}>服务医生信息</h4>
          <div className={styles.card}>
            <div className={styles.avatar}>
              <img src={require("@icons/consult/avatar.svg").default} alt="" />
            </div>
            <div className={styles.info}>
              <div className={styles.base}>
                <span>王医生</span>
                <span>内分泌科&nbsp;|&nbsp;主任医师</span>
              </div>
              <div className={styles.hospital}>积水潭医院</div>
            </div>
          </div>
        </section>
        <section className={styles.patient}>
          <h4 className={styles.title}>患者资料</h4>
          <div className={styles.base}>
            <div className={styles.name}>患者信息</div>
            <div className={styles.content}>
              李富贵&nbsp;|&nbsp;男&nbsp;|&nbsp;30岁
            </div>
          </div>
          <div className={styles.desc}>
            <div className={styles.name}>病情描述</div>
            <div className={styles.content}>头痛，头晕，恶心</div>
          </div>
        </section>
        <div className={styles.divide}></div>
        <section className={styles.list}>
          <h4 className={styles.title}>订单信息</h4>
          <div className={styles.item}>
            <div className={styles.left}>订单编号</div>
            <div className={styles.right}>
              <div className={styles.copy}>复制</div> 202201127465
            </div>
          </div>
          <div className={styles.item}>
            <div className={styles.left}>创建时间</div>
            <div className={styles.right}>2022-01-23 09:23:46</div>
          </div>
          <div className={styles.item}>
            <div className={styles.left}>应付款</div>
            <div className={styles.right}>¥ 49</div>
          </div>
          <div className={styles.item}>
            <div className={styles.left}>优惠券</div>
            <div className={styles.right}>
              <i>-¥ 10.00</i>
            </div>
          </div>
          <div className={styles.item}>
            <div className={styles.left}>积分抵扣</div>
            <div className={styles.right}>
              <i>-¥ 1.00</i>
            </div>
          </div>
          <div className={styles.item}>
            <div className={styles.left}>实付款</div>
            <div className={styles.right}>
              <i>¥ 39.00</i>
            </div>
          </div>
        </section>
        <div className={styles.divide}></div>
      </div>
      <div className={styles.meta}>
        <div className={styles.left}>
          <span>需付款</span> <span className={styles.price}>¥39.00</span>
        </div>
        <div className={styles.right}>
          <button className={classNames(styles.button, styles.gray)}>
            取消问诊
          </button>
          <button className={classNames(styles.button, styles.green)}>
            继续支付
          </button>
        </div>
        <div className={styles.count}>
          请在 00:14:59 内完成支付，超时订单将取消
        </div>
      </div>
    </>
  );
}